<template>
	<scroll-view scroll-y class="study-detail" :class="selCls" v-if="current != null">
		<view class="word"> 
			<text>{{current.Word}}</text>
		</view>
		<view class="syllable" v-if="compSyllable.length > 0">
			<template v-for="(item, index) in compSyllable" :key="index">
				<text v-if="index>0">/</text>
				<text :style="{color:item.color}">{{item.text}}</text>
			</template>
		</view>
		<view class="ps">{{current.PS}}<u-icon @click="playMp3(current.MP3)" name="volume" color="#5f5d5d" style="margin-left: 14rpx;" size="30"></u-icon></view>
		<view class="mean">{{current.Mean}}</view>
		<view class="sentence" @click="playMp3(current.SentenceSnapshot.Audio)">
			<view class="en">
				<sentence-linght-words :words="current" :sentence="current.SentenceSnapshot" play />
				<!-- {{current.SentenceSnapshot.SentenceEn}} -->
			</view>
			<view class="zh">{{current.SentenceSnapshot.SentenceCn}}</view>
			<view class="h-20rpx"></view>
			<u-image
				v-if="current.SentenceSnapshot.Media"
				height="400"
				class="sentence-img"
				mode="aspectFit"
				:src="
					current.SentenceSnapshot.Media.startsWith('http') ?
						current.SentenceSnapshot.Media :
						'https://nx5.abc5g.com'+current.SentenceSnapshot.Media
				"
			></u-image>
		</view>
		<view class="memory"> 
			<view class="memory-list">
				<view class="memory-item" v-for="(item, _index) in current.Methods" :key="_index">
					<u-tag :text="item.Method" mode="dark" /> 
					<view v-if="item.Detail.indexOf('https://') == -1" style="line-height: 50rpx; margin-top: 10rpx;">{{item.Detail}}</view>
					<view v-else style="margin:10px auto;">
						<u-image
							height="300"
							class="sentence-img"
							mode="aspectFit"
							:src="item.Detail"
						></u-image>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, watch, inject, computed } from 'vue';
	import { useStudyStore, IWord } from '@/store/study';
	import { ktlapi, createOptionsMixins } from "@/utils";
	import { useSoundEffect } from '@/common/hooks';
	import SentenceLinghtWords from '../sentence-linght-words/sentence-linght-words.vue';
	
	/** 句子组件 */
	defineOptions({
		name: 'study-word',
		inheritAttrs: false,
		options: {
			virtualHost: true
		}
	});
	// 声明组件基本要素
	const emit = defineEmits(['module-event']);
	const props = defineProps(["current"]);
	// hooks 初始化
	const studyStore = useStudyStore();
	const { playMp3 } = useSoundEffect();

	const isteacher = inject('isteacher');
	const isreview = inject('isreview');
	
	const compSyllable = computed(() => {
		if (props.current.Syllable) {
			const syList = props.current.Syllable.split('/');
			return syList.map((item: string, index: number) => {
				return {
					text: item,
					color: index % 2 === 0 ? '#0f6ab1' : '#f0ad4e'
				}
			})
		}
		return [];
	})
	
	// 声明计算属性
	const selCls = computed(() => {
		if (!isteacher && !isreview) {
			// 正式课
			return 'word-rember';
		}
		
		// 保温课
		if (isteacher && isreview) {
			return 'word-teacher-review';
		}
		
		// 自主复习
		if (isreview) {
			return 'word-review';
		}
		
		return '';
	})
	
	watch(
		() => props.current,
		(nVal, oVal) => {
			if(oVal && nVal.WordId == oVal.WordId){
				return;
			}
			if(props.current == null){
				return;
			}
			//console.log(props.current);
			if(!props.current.WordId){
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				ktlapi({ 
					apiurl:"/Word/MatchWord", 
					data: { 
						"Word": props.current.Word,
						"SentenceId": props.current.SentenceId
					}
				}).then((res:any)  => {
					//console.log(res);
					var item = studyStore.wordGroup.find((wordInfo => wordInfo.Word == props.current.Word));
					var data = res.data[0];
					item.BaseWordID = data.BaseWordID;
					item.PS = data.PS;
					item.Mean = data.Mean;
					item.MP3 = data.MP3;
					item.WordId = data.ID;
					item.Methods = JSON.parse(data.Methods);
					playMp3(data.MP3)
					//console.log(studyStore.wordGroup);
					emit("module-event", item);
					uni.hideLoading();
				});  
			}else{ 
				//setTimeout(()=>{
					//console.log(props.current.MP3)
					playMp3(props.current.MP3)
				//},3000); 
			}
		}
	)

	/** 生命周期钩子函数：页面加载完毕 */
	onMounted(() => {
		//console.log(props.current) 
	})
	
</script>

<style lang="scss" scoped>
	.study-detail{
		--font-color: #332c2b;
	}

	.study-detail {
		.play{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
		}
		.word{
			display: flex;
			justify-content: center;
			color: var(--font-color);
			font-size: 50rpx;
			margin-top: 10rpx;
		}
		.ps{
			display: flex;
			justify-content: center;
			color: #5f5d5d;
			font-size: var(--text-14);
			margin-top: 5px;
		}
		.syllable{
			display: flex;
			justify-content: center;
			color: #5f5d5d;
			margin-top: 4rpx;
			font-size: 20px;
		}
		.mean{
			display: flex;
			justify-content: center;
			color: #5f5d5d;
			margin-top: 14rpx;
			font-size: var(--text-16);
		}
		.expand{
			margin-top: 30rpx;
			display: flex;
			flex-flow: column;
			align-items: flex-start;
			font-size: var(--text-18);;
			.a{
				color: #5f5d5d;
			}
			.b{
				margin-left: 20rpx;
				color: #8b8b8c;
			}
		}
		.sentence{
			background-color: #f4f5f7;
			border-radius: 12px;
			padding: 30rpx;
			margin-top: 10rpx;
			.header{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--font-color);
				font-size: 20px;
			}
			.en{ color: var(--font-color); margin-bottom: 10rpx; font-size: var(--text-16); text-indent: 2em;}
			.zh{ color: #8b8b8c; margin-bottom: 10rpx; font-size: var(--text-16); text-indent: 2em; }
		}
		.memory{
			margin: 30rpx auto 0 auto;
			background-color: #f4f5f7;
			border-radius: 12px;
			padding: 30rpx;
			
			.header{
				font-size: 20px;
				color: var(--font-color);
			}
			.memory-item{
				color: #474443;
				margin-bottom: 20rpx;
			}
		}
	}
	
	/* #ifdef H5 */
	.study-detail.word-rember{ height: calc(100vh - 190px); }
	.study-detail.word-teacher-review{ height: calc(100vh - 190px); }
	.study-detail.word-review{ height: calc(100vh - 188px); }
	/* #endif */
	
	/* #ifdef MP */
	.study-detail.word-rember{ height: calc(100vh - 440rpx); }
	.study-detail.word-teacher-review{ height: calc(100vh - 250rpx); }
	.study-detail.word-review{ height: calc(100vh - 135rpx); }
	/* #endif */
	
	.memory-list{ min-height: 260rpx; }

	/* 针对 1280px 分辨率 */
	@media(min-width:1200px) {
		
		.detailview{
			margin: 30rpx;
		}
		.memory-list{
			height: 700rpx;
		}
		.study-detail {
			.expand{
				display: grid;
				grid-template-columns: repeat(auto-fill, 200px);
				width: 620px;
				margin: 20rpx auto 0 auto;
				column-gap: 10rpx;
			}
			.sentence{
				width: 620px;
				padding-top: 20rpx;
				margin: 20rpx auto 0 auto;
				.header{
					justify-content: flex-start;
				}
				.sentence-img{
					width: 320rpx !important;
					height: 180rpx !important;
				}
			}
			.memory{
				width: 620px;
				margin: 40rpx auto 0 auto;	
			}
		}
	}
</style>